<template>
  <div class="order-configuration">
    <el-card shadow="hover" class="config-card">
      <template #header>
        <div class="card-header">
          <span>订单规则设置</span>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
        </div>
      </template>

      <el-form
        :model="orderSettingsForm"
        label-width="180px"
        class="settings-form"
        :rules="formRules"
        ref="settingsFormRef"
      >
        <!-- 普通订单超时设置 -->
        <el-form-item label="普通订单超时时间(分钟)" prop="normalOrderOvertime">
          <el-input-number
            v-model="orderSettingsForm.normalOrderOvertime"
            :min="10"
            :max="240"
            placeholder="请输入普通订单超时分钟数"
            style="width: 200px"
          />
          <span class="form-tip">超时未支付自动取消订单</span>
        </el-form-item>

        <!-- 秒杀订单超时设置 -->
        <el-form-item label="秒杀订单超时时间(分钟)" prop="flashOrderOvertime">
          <el-input-number
            v-model="orderSettingsForm.flashOrderOvertime"
            :min="5"
            :max="120"
            placeholder="请输入秒杀订单超时分钟数"
            style="width: 200px"
          />
          <span class="form-tip">超时未支付自动取消订单</span>
        </el-form-item>

        <!-- 自动确认收货超时设置 -->
        <el-form-item label="自动确认收货时间(小时)" prop="confirmOvertime">
          <el-input-number
            v-model="orderSettingsForm.confirmOvertime"
            :min="24"
            :max="168"
            placeholder="请输入自动确认收货小时数"
            style="width: 200px"
          />
          <span class="form-tip">发货后超时自动确认收货</span>
        </el-form-item>

        <!-- 订单完成自动结束超时设置 -->
        <el-form-item label="订单自动结束时间(天)" prop="finishOvertime">
          <el-input-number
            v-model="orderSettingsForm.finishOvertime"
            :min="7"
            :max="30"
            placeholder="请输入订单自动结束天数"
            style="width: 200px"
          />
          <span class="form-tip">确认收货后超时自动结束订单，结束订单后，用户不能申请售后与评价</span>
        </el-form-item>

        <!-- 自动评价超时设置 -->
        <el-form-item label="自动评价时间(天)" prop="commentOvertime">
          <el-input-number
            v-model="orderSettingsForm.commentOvertime"
            :min="7"
            :max="30"
            placeholder="请输入自动评价天数"
            style="width: 200px"
          />
          <span class="form-tip">订单完成后超时自动好评</span>
        </el-form-item>

        <!-- 运费设置 -->
        <el-divider content-position="left">运费规则</el-divider>

        <el-form-item label="免运费门槛金额(元)" prop="freeShippingThreshold">
          <el-input-number
            v-model="orderSettingsForm.freeShippingThreshold"
            :min="0"
            :precision="2"
            :step="0.01"
            placeholder="请输入免运费门槛金额"
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="基础运费金额(元)" prop="shippingPrice">
          <el-input-number
            v-model="orderSettingsForm.shippingPrice"
            :min="0"
            :precision="2"
            :step="0.01"
            placeholder="请输入基础运费金额"
            style="width: 200px"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { queryOrderSettings, updateOrderSettings } from '@/service/order-setting.js'

// 表单引用
const settingsFormRef = ref()

// 表单数据
const orderSettingsForm = reactive({
  id: null,
  flashOrderOvertime: null,
  normalOrderOvertime: null,
  confirmOvertime: null,
  finishOvertime: null,
  commentOvertime: null,
  freeShippingThreshold: null,
  shippingPrice: null
})

// 表单校验规则
const formRules = reactive({
  flashOrderOvertime: [
    { required: true, message: '请输入秒杀订单超时时间', trigger: 'blur' },
    { type: 'number', min: 5, max: 120, message: '超时时间需在5-120分钟之间', trigger: 'blur' },
  ],
  normalOrderOvertime: [
    { required: true, message: '请输入普通订单超时时间', trigger: 'blur' },
    { type: 'number', min: 10, max: 240, message: '超时时间需在10-240分钟之间', trigger: 'blur' },
  ],
  confirmOvertime: [
    { required: true, message: '请输入自动确认收货时间', trigger: 'blur' },
    { type: 'number', min: 24, max: 168, message: '确认时间需在24-168小时之间', trigger: 'blur' },
  ],
  finishOvertime: [
    { required: true, message: '请输入订单自动结束时间', trigger: 'blur' },
    { type: 'number', min: 7, max: 30, message: '结束时间需在7-30天之间', trigger: 'blur' },
  ],
  commentOvertime: [
    { required: true, message: '请输入自动评价时间', trigger: 'blur' },
    { type: 'number', min: 7, max: 30, message: '评价时间需在7-30天之间', trigger: 'blur' },
  ],
  freeShippingThreshold: [
    { required: true, message: '请输入免运费门槛金额', trigger: 'blur' },
    { type: 'number', min: 0, message: '金额不能小于0', trigger: 'blur' },
  ],
  shippingPrice: [
    { required: true, message: '请输入基础运费金额', trigger: 'blur' },
    { type: 'number', min: 0, message: '运费不能小于0', trigger: 'blur' },
  ],
})

// 加载订单设置数据
onMounted(async () => {
  const res = await queryOrderSettings()
  Object.assign(orderSettingsForm, res.data)
})

// 保存设置
const handleSave = async () => {
  await settingsFormRef.value.validate()
  await updateOrderSettings(orderSettingsForm)
  ElMessage.success('保存订单设置成功')
  const res = await queryOrderSettings()
  Object.assign(orderSettingsForm, res.data)
}
</script>

<style lang="scss" scoped>
.order-configuration {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.config-card {
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.settings-form {
  padding-top: 20px;
}

.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.el-divider {
  margin: 20px 0;
}
</style>
